<template>
  <div class="container">
    <div class="blank"></div>
    <transition name="meswin">
      <div class="Loginwindow" v-if="dis&&!regdis">
        <div class="title"><p>登&nbsp;陆</p></div>
        <div class="LoginForm">
          <h4>用户名</h4>
          <input type="text" v-model="username" @keydown.enter="login">
          <h4>密码</h4>
          <input type="password" v-model="password"
                 @keydown.enter="login">
          <div class="Loginbutton" @click="login">登陆</div>
          <span class="Register" @click="changedis">没有账号？点击注册</span>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="Registerwindow" v-if="dis&&regdis">
        <div class="title"><p>注册</p></div>
        <div class="RegForm">
          <h4>用户名</h4>
          <input type="text" v-model="reg.username"
                 @keydown.enter="regist">
          <h4>密码</h4>
          <input type="password" v-model="reg.password" @keydown.enter="regist">
          <h4>再次输入</h4>
          <input type="password" v-model="reg.password_re" @keydown.enter="regist">
          <h4>邀请码</h4>
          <input type="text" v-model="reg.invite" @keydown.enter="regist">
          <div class="Loginbutton button-register" @click="regist">注册</div>
          <span class="Register" @click="changedis">返回登陆</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import bus from '@/assets/EventBus'
  import md5 from 'js-md5';
  export default {
    name: 'Login',
    props: ['dis'],
    data() {
      return {
        username: '',
        password: '',
        regdis:false,
        reg:{
          username:"",
          password:"",
          password_re:"",
          invite:""
        }
      }
    },
    methods: {
      check(word){
        let pattern = /[^0-9a-zA-Z_]/g;
        if(pattern.test(word))
        {
          bus.$emit('info','您的输入包含非法字符！');
          return '';
        }
        return word;
      },
      login() {
        if(!this.check(this.username)){
          bus.$emit('info','请输入用户名');
        }else if(this.check(this.password).length<6){
          bus.$emit('info','密码长度大于6位')
        }else{
          this.$http.post('/api/14ch/comic/login',{
            username: this.username,
            password: md5(this.password)
          }).then(res => {
            if (res.data.login) {
              bus.$emit('info', `${res.data.user.username}，欢迎回来`);
              bus.$emit('login', false ,res.data.user.power,res.data.user.role,res.data.user.username);
            } else {
              bus.$emit('info', '用户名或密码错误');
            }
          }).catch(error => {
            bus.$emit('info', `  ${error.status}   网络错误 `, 'default', 5000);
          })
        }
      },
      regist() {
        if (!this.check(this.reg.password)) {
          bus.$emit('info', '请输入密码');
        }else if(!this.check(this.reg.username)){
          bus.$emit('info','请输入用户名');
        }else if(!this.check(this.reg.password_re)===this.check(this.reg.password)){
          bus.$emit('info','两次密码输入不同');
        }else if(this.check(this.reg.password).length<6){
          bus.$emit('info','密码长度请超过6位');
        }else{
          this.$http.post('/api/14ch/comic/register',{
            username:this.reg.username,
            password:md5(this.reg.password),
            invite:md5(this.reg.invite)
          }).then(res=>{
            if(res.data.regist){
              bus.$emit('info', `${res.data.user.username}，欢迎回来`);
              bus.$emit('login', false, res.data.user.power,res.data.user.role,res.data.user.username);
            }else{
              bus.$emit('info',res.data.err);
            }
          }).catch(error => {
            bus.$emit('info', `  ${error.status}   网络错误 `, 'default', 5000);
          })
        }

      },
      back() {
        bus.$emit('login', false);
      },
      changedis(){
        this.reg={
          username:"",
          password:"",
          password_re:"",
          invite:""
        };
        this.regdis=!this.regdis;
      }
    },
    watch:{
      power(){
        this.refresh=false;
        this.refresh=true;
      }
    },
    created() {

    },
    mounted() {

    }
  }
</script>

<style scoped>
  .container {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 970;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.62);
    cursor: default;
  }

  .Loginwindow {
    position: fixed;
    width: 350px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
    background: #fff;
    border-radius: 5px;
    /*box-shadow: inset 0 0 10px #656565;*/
  }
  .Registerwindow{
    text-align:center;
  }
  .RegForm>h4{
    margin-top:40px;
    margin-bottom:5px;
    color:white;
    font-weight:200;
    text-shadow: 0 0 4px white;
  }
  .RegForm>input{
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 0 4px white;
    border:1px solid #eeeeee;
    padding:4px;
    font-size:16px;
  }
  .blank {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  .title {
    width: 90%;
    margin-left: 5%;
    height: 20px;
    font-size: 20px;
    font-weight: 100;
    font-family: "微软雅黑";
    text-align: center;
    color: #47d1ff;
    line-height: 0px;
    border-bottom: 1px solid #e4e4e4;
  }

  .LoginForm {
    width: 90%;
    /*margin-top:10px;*/
    margin-left: 5%;
    text-align: center;
    font-family: "微软雅黑";
  }

  .LoginForm > h4 {
    font-weight: 100;
    font-size: 14px;
    margin-top: 12px;
    color: #a6a6a6;
    margin-bottom: 5px;
    user-select: none;
  }

  .LoginForm > input {
    border: 1px solid #d0d0d0;
    height: 25px;
    width: 200px;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
    transition: width 0.5s ease;
    outline: none;
  }

  .LoginForm > input:hover {
    border-color: #9bd3f3;
    /*box-shadow: 0 0 4px #3fa4ff;*/
  }

  .LoginForm > input:focus {
    border-color: #3fa4ff;
    width: 240px;
  }

  .Loginbutton {
    color: #747474;
    width: 100px;
    height: 30px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 5px;
    line-height: 30px;
    cursor: pointer;
    transition: all 0.5s ease;
    user-select: none;
  }

  .Loginbutton:hover {
    border-color: #3fa4ff;
    transition: none;
  }

  .Register {
    color: #b8b8b8;
    cursor: pointer;
    user-select: none;
  }

  .Register:hover {
    color: #3fa4ff;
  }
  .button-register{
    margin-top:40px;
    color:white;
    box-shadow:0 0 4px white;

  }
  .button-register:hover{
    box-shadow: 0 0 4px #3fa4ff;
  }
  .meswin-enter-active, .meswin-leave-active {
    transform-origin: 50% top;
    transition: all .5s ease;
  }

  .meswin-enter-active {
    transition-delay: .5s;
  }

  .meswin-enter, .meswin-leave-to {
    transform: rotateX(75deg) matrix(2, 1, 2, .5, 1, .5);
    opacity: 0;
    /*transform: translate3d(0,-15,5px);*/
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
</style>
